import { Component, SkipSelf } from '@angular/core';
import { BComponent } from './b.component';
import { FlowerService } from './flower.service';

@Component({
  selector: 'app-a',
  standalone: true,
  imports: [BComponent],
  providers: [{ provide: FlowerService, useValue: new FlowerService('🌺') }],
  viewProviders: [
    { provide: FlowerService, useValue: new FlowerService('🌻') },
  ],
  template: `
    provide: 🌺
    <div
      class="p-2 m-2 border-2 border-dashed border-green-400 rounded-lg width-28rem"
    >
      <p>provide: 🌻</p>
      <br />
      A (&#64;SkipSelf): {{ flower.name }}
      <br />
      <app-b [prefix]="prefixB" />
      <ng-content></ng-content>
    </div>
  `,
  styles: `
    :host {
      display: block;
      @apply p-2 m-2 mb-4 border-2 border-green-600 rounded;
      width: 30rem;
    }
    .width-28rem {
      width: 28rem;
    }
  `,
})
export class AComponent {
  prefixB = "A's view";
  constructor(@SkipSelf() public flower: FlowerService) {
    console.log('------ Constructing A ------');
  }
}
